<%--
  Created by IntelliJ IDEA.
  User: CY
  Date: 2018/4/13
  Time: 10:10
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>地图覆盖物demo</title>
    <link rel="stylesheet" href="/css/base.css">
    <link rel="stylesheet" href="/lib/layer/skin/default/layer.css">
    <script src="/lib/jQuery-File-Upload-master/jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="/lib/layer/layer.js?20201106" type="text/javascript" charset="utf-8"></script>
    <script src="/js/base/base.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=YECw4heQ9wzy7RKg8OW9QLMsySKzQRan"></script>
    <style>
        #map{
            width:100%;
            height:100%;
        }
        .outer{
            width:119px;
            height:43px;
            position:absolute;
            z-index: 99999;
        }
    </style>
</head>
<body>
    <div id="map">

    </div>
    <script>
        var map = new BMap.Map('map');//创建地图实例
        var point = new BMap.Point(116.669862,40.116349); //创建点坐标
        map.centerAndZoom(point,15); //创建中心点和地图级别，初始化
//        var marker = new BMap.Marker(point); //创建标注
//        map.addOverlay(marker);
        //启用鼠标滚轮放大缩小
        map.enableScrollWheelZoom();

//        1\定义构造函数
        function ComplexCustomOverlay(point,img){
            this._point = point;
            this._img = img
        }
        // 继承API的BMap.Overlay
        ComplexCustomOverlay.prototype = new BMap.Overlay();
        //2、初始化自定义覆盖物实现初始化方法
        ComplexCustomOverlay.prototype.initialize = function(map){
            // 保存map对象实例
            this._map = map;
            // 创建div元素，作为自定义覆盖物的容器
           var div = this._div = document.createElement("div");
           div.setAttribute('class','outer');
           div.innerHTML= '<img src="'+this._img+'" />'
            // 将div添加到覆盖物容器中
            map.getPanes().labelPane.appendChild(div);
           //getPanes(),返回值:MapPane,返回地图覆盖物容器列表  labelPane呢???
            // 需要将div元素作为方法的返回值，当调用该覆盖物的show、
            // hide方法，或者对覆盖物进行移除时，API都将操作此元素。
            return div;
        }
        //3、绘制覆盖物
        // 实现绘制方法
        ComplexCustomOverlay.prototype.draw = function(){
            var _map = this._map;
//            var marker = new BMap.Marker(_map);
//            map.overlayPixelToPoint(this._point);
            var pixel = map.pointToOverlayPixel(this._point);
            this._div.style.left = pixel.x - 50 + "px";
            this._div.style.top  = pixel.y - 20 + "px";
        }

        var myCompOverlay = new ComplexCustomOverlay(new BMap.Point(116.657907,40.119291),'../img/map/dang.png');
        map.addOverlay(myCompOverlay);//将标注添加到地图中

        $(document).on('click','.outer',function(){
            alert(111)
        })



    </script>
</body>
</html>
